<template>
  <view class="w-[750rpx] min-h-screen bg-gray-50">
    <!-- Header -->
    <view class="bg-white px-[32rpx] py-[24rpx] shadow-sm flex items-center justify-between">
      <view class="flex items-center">
        <IconFont name="left" size="24" class="text-gray-600 mr-[16rpx]" @click="goBack" />
        <text class="text-[32rpx] font-bold text-gray-800">子功能 1-2</text>
      </view>
      <IconFont name="more" size="24" class="text-gray-600" @click="showMoreOptions" />
    </view>

    <!-- Form Content -->
    <view class="p-[32rpx]">
      <view class="bg-white rounded-[16rpx] p-[32rpx] shadow-sm">
        <text class="text-[32rpx] font-bold text-gray-800 block mb-[32rpx]">表单信息</text>
        
        <!-- Input Fields -->
        <view class="space-y-[32rpx]">
          <!-- Name Input -->
          <view>
            <text class="text-[28rpx] text-gray-700 block mb-[16rpx]">姓名 *</text>
            <input 
              v-model="formData.name"
              placeholder="请输入姓名"
              class="w-full px-[24rpx] py-[20rpx] bg-gray-50 rounded-[12rpx] text-[28rpx]"
            />
          </view>

          <!-- Phone Input -->
          <view>
            <text class="text-[28rpx] text-gray-700 block mb-[16rpx]">手机号 *</text>
            <input 
              v-model="formData.phone"
              placeholder="请输入手机号"
              type="number"
              class="w-full px-[24rpx] py-[20rpx] bg-gray-50 rounded-[12rpx] text-[28rpx]"
            />
          </view>

          <!-- Category Picker -->
          <view>
            <text class="text-[28rpx] text-gray-700 block mb-[16rpx]">分类选择</text>
            <view 
              class="w-full px-[24rpx] py-[20rpx] bg-gray-50 rounded-[12rpx] flex items-center justify-between"
              @click="showCategoryPicker = true"
            >
              <text class="text-[28rpx]" :class="formData.category ? 'text-gray-800' : 'text-gray-400'">
                {{ getCategoryText(formData.category) || '请选择分类' }}
              </text>
              <IconFont name="right" size="16" class="text-gray-400" />
            </view>
          </view>

          <!-- Description Textarea -->
          <view>
            <text class="text-[28rpx] text-gray-700 block mb-[16rpx]">描述信息</text>
            <textarea 
              v-model="formData.description"
              placeholder="请输入描述信息"
              class="w-full px-[24rpx] py-[20rpx] bg-gray-50 rounded-[12rpx] text-[28rpx] min-h-[200rpx]"
            />
          </view>

          <!-- Switch Options -->
          <view>
            <text class="text-[28rpx] text-gray-700 block mb-[16rpx]">选项设置</text>
            <view class="space-y-[24rpx]">
              <view 
                v-for="option in switchOptions" 
                :key="option.id"
                class="flex items-center justify-between"
              >
                <view>
                  <text class="text-[28rpx] text-gray-800 block">{{ option.title }}</text>
                  <text class="text-[24rpx] text-gray-500 mt-[4rpx]">{{ option.description }}</text>
                </view>
                <switch 
                  :checked="option.checked" 
                  @change="handleSwitchChange(option.id, $event)"
                  color="#2196F3"
                />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Action Buttons -->
      <view class="mt-[48rpx] space-y-[24rpx]">
        <view 
          class="w-full bg-blue-500 text-center py-[28rpx] rounded-[12rpx]"
          @click="handleSubmit"
        >
          <text class="text-[32rpx] text-white font-bold">提交</text>
        </view>
        <view 
          class="w-full bg-white border border-gray-300 text-center py-[28rpx] rounded-[12rpx]"
          @click="handleReset"
        >
          <text class="text-[32rpx] text-gray-600">重置</text>
        </view>
      </view>
    </view>

    <!-- Category Picker Popup -->
    <nut-popup v-model:visible="showCategoryPicker" position="bottom" round>
      <nut-picker
        v-model="categoryValue"
        :columns="categoryOptions"
        title="选择分类"
        @confirm="onCategoryConfirm"
        @cancel="showCategoryPicker = false"
      />
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

interface FormData {
  name: string
  phone: string
  category: string
  description: string
}

interface SwitchOption {
  id: number
  title: string
  description: string
  checked: boolean
}

const formData = ref<FormData>({
  name: '',
  phone: '',
  category: '',
  description: ''
})

const switchOptions = ref<SwitchOption[]>([
  {
    id: 1,
    title: '接收通知',
    description: '是否接收系统通知消息',
    checked: true
  },
  {
    id: 2,
    title: '公开信息',
    description: '是否公开个人信息',
    checked: false
  },
  {
    id: 3,
    title: '自动保存',
    description: '是否自动保存表单数据',
    checked: true
  }
])

const showCategoryPicker = ref(false)
const categoryOptions = ref([
  { text: '分类一', value: 'category1' },
  { text: '分类二', value: 'category2' },
  { text: '分类三', value: 'category3' },
  { text: '分类四', value: 'category4' }
])
const categoryValue = ref<string[]>([''])

const goBack = () => {
  Taro.navigateBack()
}

const showMoreOptions = () => {
  Taro.showActionSheet({
    itemList: ['保存草稿', '清空表单', '帮助说明'],
    success: (res) => {
      const actions = ['保存草稿', '清空表单', '帮助说明']
      Taro.showToast({
        title: `选择了${actions[res.tapIndex]}`,
        icon: 'success',
        duration: 1500
      })
    }
  })
}

const getCategoryText = (val: string): string => {
  const found = categoryOptions.value.find(item => item.value === val)
  return found ? found.text : ''
}

const onCategoryConfirm = () => {
  showCategoryPicker.value = false
  formData.value.category = categoryValue.value[0]
  Taro.showToast({
    title: '分类选择成功',
    icon: 'success',
    duration: 1000
  })
}

const handleSwitchChange = (optionId: number, event: any) => {
  const option = switchOptions.value.find(opt => opt.id === optionId)
  if (option) {
    option.checked = event.detail.value
  }
}

const validateForm = (): boolean => {
  if (!formData.value.name.trim()) {
    Taro.showToast({
      title: '请输入姓名',
      icon: 'error',
      duration: 1500
    })
    return false
  }

  if (!formData.value.phone.trim()) {
    Taro.showToast({
      title: '请输入手机号',
      icon: 'error',
      duration: 1500
    })
    return false
  }

  const phoneRegex = /^1[3-9]\d{9}$/
  if (!phoneRegex.test(formData.value.phone)) {
    Taro.showToast({
      title: '手机号格式不正确',
      icon: 'error',
      duration: 1500
    })
    return false
  }

  return true
}

const handleSubmit = () => {
  if (!validateForm()) {
    return
  }

  Taro.showLoading({
    title: '提交中...'
  })

  setTimeout(() => {
    Taro.hideLoading()
    Taro.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 2000
    })
  }, 2000)
}

const handleReset = () => {
  Taro.showModal({
    title: '确认重置',
    content: '确定要重置所有表单数据吗？',
    success: (res) => {
      if (res.confirm) {
        formData.value = {
          name: '',
          phone: '',
          category: '',
          description: ''
        }
        switchOptions.value.forEach(option => {
          option.checked = option.id === 1 || option.id === 3
        })
        Taro.showToast({
          title: '重置成功',
          icon: 'success',
          duration: 1500
        })
      }
    }
  })
}
</script>